<template>
  <div class="order">
    <a-card title="当前用户任务">
      <!--      <formButtonGroup-->
      <!--          v-model:columns="columns"-->
      <!--          v-model:size="size"-->
      <!--          :config="config"-->
      <!--          :search-bar="searchBar"-->
      <!--          @refresh="init"-->
      <!--          @change-search-bar="changeSearchBar"-->
      <!--      >-->
      <!--        <template #leftboon>-->
      <!--          <a-space>-->
      <!--            <upload-excel></upload-excel>-->
      <!--            <a-button type="primary" @click="addSalesDetails">新增销售订单</a-button>-->
      <!--          </a-space>-->
      <!--        </template>-->
      <!--      </formButtonGroup>-->
      <vxe-table border :data="tabelList" show-footer :row-config="{ isHover: true }" size="mini">
        <vxe-column title="任务名" align="center" width="150">
          <template #default="{ row }"> {{ row.taskname }}</template>
        </vxe-column>
        <vxe-column title="申请人" align="center" width="150">
          <template #default="{ row }"> {{ row.applicant }}</template>
        </vxe-column>
        <vxe-column title="描述" align="center" width="150">
          <template #default="{ row }"> {{ row.description }} </template>
        </vxe-column>
        <vxe-column title="创建时间" align="center" width="160">
          <template #default="{ row }"> {{ row.createTime }} </template>
        </vxe-column>
        <vxe-column title="任务id" align="center" width="300">
          <template #default="{ row }"> {{ row.taskid }} </template>
        </vxe-column>
        <vxe-column title="任务定义id" align="center" width="150">
          <template #default="{ row }"> {{ row.taskDefinitionKey }} </template>
        </vxe-column>
        <vxe-column title="负责人" align="center" width="100">
          <template #default="{ row }"> {{ row.assignee }} </template>
        </vxe-column>
        <vxe-column title="流程实例id" align="center" width="300">
          <template #default="{ row }"> {{ row.processInstanceId }} </template>
        </vxe-column>
        <vxe-column title="流程定义id" align="center" width="300">
          <template #default="{ row }"> {{ row.processDefinitionId }} </template>
        </vxe-column>
        <vxe-column title="父任务id" align="center" width="100">
          <template #default="{ row }"> {{ row.parentTaskId }} </template>
        </vxe-column>
        <vxe-column title="操作" align="center" width="100" fixed="right">
          <template #default="{ row }">
            <a-button size="mini" @click="toDetail(row.taskid)">查看详情</a-button>
          </template>
        </vxe-column>
      </vxe-table>

      <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
        @page-change="getTable"
      >
      </vxe-pager>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './currentUserTask.ts';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import uploadExcel from '@com/uploadExcel/uploadExcel.vue';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup, uploadExcel },
  setup() {
    const { base, getTable, toDetail } = importConfig();

    return {
      ...toRefs(base),
      getTable,
      toDetail,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }

  &-bomxa {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
}
.formHeader {
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
.pollabel {
  font-size: 12px;
  color: #7b7b7b;
  &-value {
    font-size: 14px;
    color: #3e528e;
    font-weight: 900;
    padding-left: 10px;
  }
}

:deep(.arco-upload-list.arco-upload-list-type-text) {
  display: none;
}

:deep(.arco-btn),
:deep(.arco-btn):hover {
  background-color: #409eff;
  color: white;
}
</style>
